<template>
<div class="index-view">
    <div class="other-container">
        <div class="left">
            2021/11/28
        </div>
        <div class="right">
            <span>123</span>
            <span>123</span>
            <span>123</span>
        </div>
    </div>
    <div class="name">
        storagex-js 1.4.9文档
        <div class="number">
            阅读：123
        </div>
    </div>
    <div class="blog_info">
        <Markdown
            :markdown="false?'123':dataInfo">
        </Markdown>
    </div>
    <div class="data-list">
        <PaperItem 
            v-for="(item,index) in 7"
            :key="index">
        </PaperItem>
    </div>
</div>
</template>
<script>
import {isClient} from "~/common/OtherTools";
import {Api} from "@/common/http";
import Markdown from "@/components/MarkDown.vue";
import PaperItem from "./components/PaperItem";
export default { 
    name:"Index",
    layout: 'default',
    components:{Markdown,PaperItem},
    head(){
        return {
            title: "首页",
            meta: [
                {
                    name: "keywords",
                    content: "测试"
                },
            ],
        };
    },
    data(){ 
        return{ 
            essay:{},
            dailyessay:{},  //屏幕上显示的内容
            date:'',  //当前时间
            dataInfo:`## 网站大更新↵**经过一番更新，网站速度得到了明显提升，可以秒级刷新，快的使我兴奋，这是用seo换来的，毕竟鱼和熊掌不可兼得也。**↵↵**马上就是国庆咯，刚过中秋就过国庆，网站也更新了，就差国庆换服务器了，唉，钱是哗哗哗往下掉啊，没办法，就这点爱好。**↵↵更新的站点↵↵[毒蘑菇搜索](https://search.dumogu.top)↵↵[毒蘑菇配色](https://color.dumogu.top)`,
        }
    },
    asyncData(context){
        if(isClient()) return; //在服务端运行时才触发
        console.log(1);
        console.log(Api.login());
        console.log(2);
    },
    created(){
        if(!isClient()) return;
        this.getDate();
        if(this.dailyessay.essay_id) return;
        this.getData();
    },
    methods:{
        goPage(id){
            this.$router.push("/essay/"+id);  
        },
        getData(){
            this.$axios.$Api.getDailyEssay().then((data)=>{
                this.essay = data;
                this.essay.id = data.essay_id;
                this.dailyessay = data;
            });
        },
        getDate(){ //获取当前时间
            var now = new Date();
            this.date = now.getFullYear() +"-"+ (now.getMonth()+1) +"-"+ now.getDate();
        },
    },
}
</script>
<style lang='scss' scoped>
.index-view{
    width:var(--container-width);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px 0;
    display: grid;
    grid-gap:30px; 
    >.other-container{
        width: 100%;
        background-color: rgb(218, 218, 218);
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        font-size: 17px;
        font-weight: bold;
        >.left{
            width: fit-content;
        }
        >.right{
            display: flex;
            >span{
                margin-left: 5px;
                border: 1px solid;
                border-radius: 5px;
            }
        }
    }
    >.name{
        color: #3a4650;
        font-size: 30px;
        font-weight: bold;
        line-height: 1.5;
        >.number{
            color: #3a4650;
            font-size: 15px;
            font-weight: bold;
            line-height: 1.5;
        }
    }
    >.data-list{
        width: 100%;
        background-color: rgb(218, 218, 218);
        border-radius: 5px;
        display: flex;
        padding: 10px 0 0 10px;
        box-sizing: border-box;
        flex-wrap: wrap;
        >*{
            margin: 0 10px 10px 0;
        }
    }
}
</style>